<template>
  <div class='page'>
    <van-nav-bar :title='$t("m.header.me")' />
    <div class='container'>
      <div class='floor floor_one' @click='onInfo'>
        <img v-if='userInfo.avatar' :src='userInfo.avatar'>
        <img v-else src='https://zszken.cdn.bcebos.com/static/baby-na.png'>
        <p v-if='userInfo.user'>
          {{ userInfo.user }}
        </p>
        <p v-else>
          {{ $t('m.login.noLogin') }}
        </p>
      </div>
      <van-cell class='member_item' :title='$t("m.member.info")' is-link @click='onInfo' />
      <van-cell class='member_item' :title='$t("m.member.order")' is-link @click='toOrder' />
      <van-cell class='member_item' :title='$t("m.member.address")' is-link @click='onAddress' />
      <van-cell class='member_item' :title='$t("m.member.set")' is-link to='set' />
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import { NavBar, Cell, CellGroup } from 'vant'
export default {
  metaInfo () {
    return {
      title: this.$t('m.meta.member.title'),
      meta: [
        {
          name: this.$t('m.meta.member.name'),
          content: this.$t('m.meta.member.content'),
        },
      ],
    }
  },
  data () {
    return {}
  },
  computed: {
    ...mapState(['userInfo']),
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  beforeMount () {
    this.getUserInfo()
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations({
      setOrderStatus: 'SET_ORDER_STATUS',
    }),
    onInfo () {
      this.userInfo.user ? this.$router.push('./info') : this.toLogin()
    },
    toOrder () {
      if (this.userInfo.user) {
        this.setOrderStatus('paying')
        this.$router.push('./order')
      } else {
        this.toLogin()
      }
    },
    onAddress () {
      this.userInfo.user ? this.$router.push('./address') : this.toLogin()
    },
    toLogin () {
      this.$router.push('./login')
    },
  },
}
</script>
<style lang='scss' scoped>
.page {
  background: rgb(245, 245, 245);
  margin-bottom: 80px;
}

.floor_one {
  width: 100%;
  height: 200px;
  background: #fa5746;
  text-align: center;
  cursor: pointer;

  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 30px;
  }

  p {
    color: white;
    margin-top: 20px;
    font-size: 18px;
  }
}

.member_item {
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
